<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

<template>
  <div class="bg-white h100">
    <div style="padding:4rem 0.6rem 0 0.6rem">
      <van-field class="f16" clearable v-model="from.phone" type="tel" maxlength="11" placeholder="手机号"/>
      
      <br>
      <br>
      <br>
      <br>
      <van-button
        :loading="isLoginIng"
        loading-text="登录中..."
        class="mt20 b1 round"
        type="info"
        block
        :disabled="loginState"
        @click="nextPage"
      >{{loginState?"请输入商户手机号":"下一步"}}</van-button>
    </div>
  </div>
</template>

<script>
import { shopList } from "@/http/api";
export default {
  data() {
    return {
      from: {
        phone: ""
      },
      isLoginIng: false, //非加载中状态
      loginState: true //不可点击状态
    };
  },
  watch: {
    from: {
      handler(newName) {
        if (newName.phone.length) {
          this.loginState = false;
        } else {
          this.loginState = true;
        }
      },
      deep: true
    }
  },
  created(){
  },
  methods: {
    nextPage() {
      if (this.from.phone.length != 11) {
        this.Toast.warning({
          iconUrl:"../../../static/img/logo.png",
          position: "topCenter",
          title: "提示:",
          message: "您的手机号输入有误"
        });
        return;
      }
      this.isLoginIng = true;
      this.loginState = true;
      shopList(this.from).then(res => {
        this.loginState = false;
        this.isLoginIng = false;
        if (!res.result.length) {
          this.Toast.warning({
            position: "topCenter",
            title: "提示",
            message: "该账户下暂无商铺信息"
          });
          return;
        }
        window.localStorage.setItem("shopList", JSON.stringify(res.result));
        this.$router.push({
          path: "./loginA",
          query: {
            phone: this.from.phone
          }
        });
      });
    }
  }
};
</script>


